<style>
    /** @version:1.1.5
 * @author:byl@*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body, html {
        font-size: 14px;
        margin: 0;
        min-width: 1000px;
        padding: 0;
        background-color: #f2f2f2;
    }

    .ml45 {
        margin-left: 45px;
    }

    /* 鏂板姞*/
    .mtb5 {
        margin: 5px 0;
    }

    .text-center {
        text-align: center;
    }

    i {
        font-style: normal;
    }

    /*input {
        margin: 0;
        padding: 0;
        color: #333;
        font-size: 12px;
        outline: 0 none;
        vertical-align: middle;
        height: 40px !important;
        border: 1px solid #d7d7d7
    }*/

    button, dd, div, dl, dt, form, img, li, ol, p, td, th, ul {
        border: 0 none;
        margin: 0;
        padding: 0;
    }

    /*淇敼缁戝畾*/
    .rebinding-menu {
        background-color: #fff;
        height: 80px;
        width: 100%;
        line-height: 80px;
        border-bottom: solid 1px #d5d5d5;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        margin-bottom: 14px;
        z-index: 1100;
    }

    .rebinding-menu .logo {
        float: left;
    }

    .rebinding-menu .rebinding-btn {
        float: right;
    }

    .rebinding-btn button {
        width: 80px;
        height: 40px;
        background-color: #3399FF;
        color: #fff;
        border-radius: 6px;
    }

    .rebinding-box .box-title {
        width: 500px;
        margin: 60px auto;
        text-align: center;
    }

    .rebinding-box .box-title i {
        font-size: 12px;
        color: #999;
    }

    .rebinding-box .box-timeline {
        width: 575px;
        margin: 0 auto;
        text-align: center;
    }

    .rebinding-box .box-timeline ul li {
        float: left;
        font-size: 16px;
        color: #999;
        width: 100px;
        position: relative;
        margin-right: 105px;
    }

    /*.rebinding-box .box-timeline  div[class*=box-outside]{width: 38px; height: 38px; background-color: #d7d7d7; border-radius: 50%;line-height: 38px; margin: 10px auto; display:flex; display: -webkit-flex;  align-items:center;}*/
    .rebinding-box .box-timeline .outside1ab {
        width: 38px;
        height: 38px;
        background-color: #d7d7d7;
        border-radius: 50%;
        line-height: 38px;
        margin: 10px auto;
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }

    .rebinding-box .box-timeline .outside2a {
        width: 38px;
        height: 38px;
        background-color: #d7d7d7;
        border-radius: 50%;
        line-height: 38px;
        margin: 10px auto;
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }

    .rebinding-box .box-timeline .outside1ab:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 105px;
        background-color: #d7d7d7;
        top: 48px;
        right: 71px;
        z-index: 2;
    }

    .rebinding-box .box-timeline .outside1ab:after {
        content: "";
        position: absolute;
        height: 1px;
        width: 105px;
        background-color: #d7d7d7;
        top: 48px;
        left: 71px;
        z-index: 2;
    }

    .rebinding-box .box-timeline .outside2a:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 105px;
        background-color: #d7d7d7;
        top: 48px;
        right: 71px;
        z-index: 2;
    }

    .rebinding-box .box-timeline div[class*=box-num] {
        width: 26px;
        height: 26px;
        line-height: 26px;
        margin: 14px auto;
        border-radius: 50%;
        background-color: #39f;
        color: #fff;
    }

    /*.rebinding-box .box-timeline  div[class*=box-nums]:after{content: ""; position:absolute; height: 1px; width: 105px;background-color: #39f;top: 46px;left: 71px;}*/
    .rebinding-box .box-timeline .outside1ab .num2ab {
        background-color: #999;
    }

    .rebinding-box .box-timeline .outside2a .num3a {
        background-color: #999;
    }

    .rebinding-box .box-timeline ul .box-num1 {
        background-color: #39f;
    }

    .rebinding-box .box-timeline .box-num2, .rebinding-box .box-timeline .box-num3 {
        margin-left: 45px;
    }

    .rebinding-box .box-timeline .box-num1:after {
        content: "";
        position: absolute;
        height: 1px;
        width: 105px;
        background-color: #39f;
        top: 48px;
        left: 71px;
    }

    .rebinding-box .box-timeline .num2ab:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 105px;
        background-color: #39f;
        top: 48px;
        right: 71px;
    }

    .rebinding-box .box-timeline .num2ab:after {
        content: "";
        position: absolute;
        height: 1px;
        width: 105px;
        background-color: #39f;
        top: 48px;
        left: 71px;
    }

    .rebinding-box .box-timeline .num3a:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 105px;
        background-color: #39f;
        top: 48px;
        right: 71px;
    }

    /*绗竴姝�*/
    .rebinding-box div[class*=box-form] {
        width: 575px;
        margin-top: 130px;
        position: absolute;
        left: 34%;
    }

    .rebinding-box .twobox-form {
        display: none;
    }

    .rebinding-box .threebox-form {
        display: none;
    }

    .rebinding-box .onebox-form .oneform-label {
        float: left;
        display: block;
        width: 70px;
        text-align: center;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
    }

    .rebinding-box .onebox-form .oneform-input {
        margin-left: 75px;
    }

    .rebinding-box .onebox-form .oneform-input input {
        /*border-radius: 6px;*/
        width: 100%;
        padding-left: 10px;
    }

    .rebinding-box .onebox-form .oneform-input input::-webkit-input-placeholder {
        font-size: 14px;
        color: #999;
    }

    .rebinding-box .onebox-form .onebtn-box {
        width: 130px;
        height: 40px;
        margin: 30px auto;
    }

    .rebinding-box .onebox-form .onebtn-box .onebtn {
        width: 130px;
        height: 40px;
        margin: 0 auto;
        background-color: #39f;
        color: #fff;
        border-radius: 6px;
        font-size: 14px;
    }

    /*绗簩姝�*/
    .rebinding-box .twobox-form label {
        float: left;
        display: block;
        width: 70px;
        text-align: center;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
    }

    .rebinding-box .twobox-form .newtel {
        margin-bottom: 14px;
    }

    .rebinding-box .twobox-form div[class*=twoform-input] {
        margin-left: 75px;
    }

    .rebinding-box .twobox-form input {
        border-radius: 6px;
        width: 100%;
        padding-left: 10px;
    }

    .rebinding-box .twobox-form .twoform-input2 input {
        width: 40%;
    }

    .rebinding-box .twobox-form .sendcode {
        float: right;
        width: 45%;
        /*height: 40px;
        margin: 0 auto;*/
        background-color: #FF6A00;
        color: #fff;
        /*border-radius: 6px;*/
        font-size: 14px;
        margin-top: -34px;
    }

    .rebinding-box .twobox-form .twobtn-box {
        width: 130px;
        height: 40px;
        margin: 15px 75px;
    }

    .rebinding-box .twobox-form .twobtn-box .twobtn {
        width: 130px;
        height: 40px;
        background-color: #39f;
        color: #fff;
        border-radius: 6px;
        font-size: 14px;
    }

    /*绗笁姝�*/
    .rebinding-box .threebox-form .successr .symbol {
        width: 66px;
        height: 66px;
        border: solid 4px #39f;
        border-radius: 50%;
        position: relative;
        margin: 0 auto;
    }

    .rebinding-box .threebox-form .successr .symbol:before {
        position: absolute;
        content: " ";
        width: 36px;
        height: 19px;
        border-left: 4px solid #39f;
        border-bottom: 4px solid #39f;
        top: 12px;
        left: 10px;
        transform: rotate(-46deg);
    }

    .rebinding-box .threebox-form .successr p {
        font-size: 20px;
        text-align: center;
        margin-top: 15px;
    }

    .rebinding-box .threebox-form .successr button {
        width: 130px;
        height: 40px;
        background-color: #39f;
        color: #fff;
        margin: 7% 40%;
        border-radius: 6px;
        font-size: 14px;
    }
</style>
</head>
<body>
<div class="rebinding-box">
    <div class="box-title">
        <h2 class="mtb5">修改用户密码</h2>
        <i>为了保障您的帐户安全，请先进行安全验证</i>
    </div>
    <div class="box-timeline">
        <ul class="text-center" style="width: 800px;">
            <li>
                <span id="help-tips">验证身份</span>
                <div class="box-num1">
                    1
                </div>
            </li>
            <li class="ml45">
                修改密码
                <div class="box-outside1 outside1ab" id="outside1abs">
                    <div class="box-num2 num2ab">
                        2
                    </div>
                </div>
            </li>
            <li class="ml45">
                完成
                <div class="box-outside2 outside2a" id="outside2as">
                    <div class="box-num3 num3a">
                        3
                    </div>
                </div>
            </li>
            <div class="clear">

            </div>
        </ul>
    </div>
    <!--第一步-->
    <div class="twobox-form" style="display: block;" id="oneform">
        <div style="margin: 6px;">
            账户<span style="color:#f40" id="username"></span>为确认是你本人操作，请完成以下验证
        </div>
        <form class="twoform">

            <div class="twoform-box">
                <div class="newtel">
                    <label class="twoform-label">手机号</label>
                    <div class="twoform-input">
                        <input type="text" id="phone"  class="layui-input layui-input-sm" autocomplete="off" readonly="">
                    </div>
                </div>
                <div class="validatecode">
                    <label class="twoform-label2">验证码</label>
                    <div class="twoform-input2">
                        <input type="text" id="code"class="layui-input layui-input-sm"  maxlength="6" autocomplete="off" placeholder="请输入验证码">
                    </div>
                    <button type="button" class="layui-btn layui-btn-danger sendcode"  id="sendcode">发送验证码</button>
                </div>
            </div>
        </form>
        <div class="twobtn-box">
            <button  class="layui-btn layui-btn-normal layui-btn-sm" style="width: 80px;" id="onebtn">下一步</button>
        </div>
    </div>
    <!--第二步-->
    <div class="onebox-form" style="display: none;" id="twoform">
        <div class="oneform">
            <div class="oneform-box"  style="margin-top: 12px;">
                <label class="oneform-label">新密码 </label>
                <div class="oneform-input">
                    <input type="password" id="password1" class="layui-input layui-input-sm" autocomplete="off" placeholder="请填写新密码">
                </div>
            </div>
            <div  class="oneform-box" style="margin-top: 12px;">
                <label class="oneform-label">确认密码 </label>
                <div class="oneform-input">
                    <input type="password" id="password2" class="layui-input layui-input-sm" autocomplete="off" placeholder="请确认密码">
                </div>
            </div>
            <div class="onebtn-box">
                <button class="layui-btn layui-btn-normal layui-btn-sm" style="width: 80px;" id="twobtn">下一步</button>
            </div>
        </div>
    </div>
    <!--第三步-->
    <div class="threebox-form" id="threeform">
        <div class="successr">
            <div class="symbol">

            </div>
            <p>恭喜您，修改用户密码成功！</p>
            <button class="layui-btn layui-btn-normal layui-btn-sm" id="confirm">确认</button>
        </div>
    </div>
</div>

</body>
<script>
    var menthods;
    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
        var randomStrs;
        var initCode;
        var form = layui.form,
            tools = layui.tools,
            layer = layui.layer,
            $ = layui.$;
        var soutside1ab = $("#outside1abs");
        var soutside2as = $("#outside2as");
        var oneforms = $("#oneform");
        var twoforms = $("#twoform");
        var threeforms = $("#threeform");
        menthods = {
            randomStrs() {
                var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
                var tmp = "";
                for (var i = 0; i < 10; i++) {
                    tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
                }
                return tmp;
            },
            userData() {
                tools.request({
                    url: '/plm/user/accountInfo',
                    method: "post"
                }).done(function (res) {
                    if (res.code == 0) {
                        $("#username").html(res.data.realName);
                        $("#phone").val(res.data.phone);
                        $("#oneform").show();
                    } else {
                        layer.msg(res.msg, {
                            icon: 5
                        });
                    }
                });
            },
            on: function () {
                $("#onebtn").click(function () {
                    var code = $("#code").val();
                    if (code) {
                        tools.request({
                            url: '/plm/user/checkCode',
                            method: "get",
                            params: {
                                randomStr: randomStrs,
                                code: code
                            }
                        }).done(function (res) {
                            if (res.code == 0) {
                                initCode = res.data;
                                soutside1ab.removeClass("outside1ab");
                                oneforms.hide();
                                twoforms.show();
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                        });
                    } else {
                        layer.alert("请输入验证码！")
                    }
                });
                $("#twobtn").click(res => {
                    var password1 = $("#password1").val();
                    var password2 = $("#password2").val();
                    if (menthods.checkpassword(password1)) {
                        if (password1 === password2) {
                            menthods.updateNewPassword(password1);
                        } else {
                            layer.alert("两次输入密码不一致！")
                        }
                    }
                })
                $("#confirm").click(res => {
                    tools.goto('/account/#!security');
                })
                //发送验证码
                $("#sendcode").click(res => {
                    menthods.sendCodes($("#sendcode"));
                    tools.request({
                        url: '/plm/user/sendCode?randomStr=' + randomStrs,
                        method: "get"
                    }).done(function (res) {
                        if (res.code == 0) {

                        } else {
                            layer.msg(res.msg, {
                                icon: 5
                            });
                        }
                    });
                });
            },
            sendCodes(dom) {
                var count = 60;
                var countdown = setInterval(CountDown, 1000);
                function CountDown() {
                    dom.attr('class', 'layui-btn layui-btn-danger sendcode layui-btn-disabled');
                    dom[0].style.background = '#ccc';
                    dom.html(count + "秒后重新发送验证密码!");
                    if (count == 0) {
                        dom.html("发送验证码").attr('class', 'layui-btn layui-btn-danger sendcode');
                        dom[0].style.background = '#FF6A00';
                        clearInterval(countdown);
                    }
                    count--;
                }
            },
            checkpassword(pass) {
                var patrn = /^(\w){6,20}$/;
                if (!patrn.exec(pass)) {
                    layer.alert("只能输入6-20个字母、数字、下划线")
                    return false
                }
                return true;
            },
            updateNewPassword(pass) {
                tools.request({
                    url: '/plm/user/chengePassword',
                    method: "get",
                    params: {
                        rand: initCode,
                        newPassword: pass
                    }
                }).done(function (res) {
                    if (res.code == 0) {
                        threeforms.show();
                        twoforms.hide();
                        soutside2as.removeClass("outside2a");
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                });
            }
        }

        menthods.userData();
        randomStrs = menthods.randomStrs();
        menthods.on();

    })
</script>